<template>
  <div>
    <div id="cod" style="width: 400px;height:400px;"></div>
    <button type="button" class="btn btn-success" @click="drawGuage">刷新</button>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      guageProperties: {}
    };
  },
  computed: {
    ...mapGetters(["getGuageChartProperties"])
  },
  methods: {
    ...mapActions(["addGuage", 'setGuage']),

    setGuage() {
        this.guageProperties['series'][0]['name'] = '速度';
        this.guageProperties['series'][0]['min'] = 0;
        this.guageProperties['series'][0]['max'] = 100;
        this.guageProperties['series'][0]['splitNumber'] = 10;
        this.guageProperties['series'][0]['data'][0]['name'] = 'COD';
        
    },
    drawGuage() {
      this.$axios.get("/getGuageChart/cod").then(response => {
        // 1.获取仪表盘的所有属性和对应的属性值
        this.guageProperties = this.getGuageChartProperties;

        // 2.设置特有的属性和属性值
        this.setGuage();
        this.guageProperties['series'][0]['data'][0]['value'] = JSON.parse(response.data)['value'];
        
        // 3.基于上述数据绘制仪表盘
        this.$echarts.init(document.getElementById("cod")).setOption(this.guageProperties);
      });
    }
  },
  mounted: function() {
    this.drawGuage();
  }
};
</script>